<template>
	<view class="order">
		<view class="order-pos">
			<view class="order-fiexd">
				<view class="order-head">
					<view class="head-parent df df-justify-content-between df-align-items">
						<view class="order-head-child1">
							<view class="order-head-child2"></view>
						</view>
						<!-- <view class="total-x "> -->
							<view class="total-x-l df df-flex-direction-column df-align-items">
								<view>{{payTotal}}</view>
								<text>累计加油消费(元)</text>
							</view>
							<view class="center-line"></view>
							<view class="total-x-r df df-flex-direction-column df-align-items">
								<view>{{cycleTotal}}</view>
								<text>周期内加油量(元)</text>
							</view>
							<view class="center-line"></view>
							<view class="total-x-r df df-flex-direction-column df-align-items">
								<view>{{disTotal}}</view>
								<text>总优惠金额(元)</text>
							</view>
						<!-- </view>
						 
						 -->
					</view>
				</view>
				<view class="order-nav">
					<view class="order-nav-in df df-justify-content-between df-align-items-end">
						<view v-for="(item,index) in nav_list" :key="index" @click="checkSel(item)">
							<text :class="sel_index == item.id? 'active-ft' : ''">{{item.name}}</text>
							<view class="b-line" v-if="sel_index == item.id"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-list w-center">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
			<view class="order-item" v-for="(item,index) in list" @click="$navigateTo('/pages_order/pages/order/order-detail/order-detail?id='+item.id+'&state='+item.status)" :key="index">
				<view class="order-item-top df df-justify-content-between">
					<view class="order-item-top-l df df-align-items">
						<view class="name-total">{{item.num}}L {{item.oil_name}} {{item.station_name}}</view>
						<view class="pay-status-sc df df-align-items" style="background-color: #FAAD1C;" v-if="item.status ==1">已支付</view>
						<view class="pay-status-sc df df-align-items" style="background-color: #DBDBDB;" v-else-if="item.status == 0">待支付</view>
						<view class="pay-status-sc df df-align-items" style="background-color: #DBDBDB;" v-else-if="item.status == 2">已退款</view>
					</view>
					<view class="order-item-top-r">
						￥{{item.total}}
					</view>
				</view>
				<text class="order-time">{{item.createtime}}</text>
			</view>
			<mescroll-empty v-if="list.length==0"></mescroll-empty>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import api from '@/api/order.js'
	export default{
		mixins: [MescrollMixin],
		data(){
			return{
				sel_index: 0,
				status: '',
				nav_list: [
					{id: 0, name: '全部订单'},
					{id: 1, name: '已支付订单'},
					{id: 2, name: '退款订单'}
				],
				downOption: {
					use: true,
				},
				upOption: {
					use: true,
					// auto: false,
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10, // 每页数据的数量
						time: 200 // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					empty: {
						use: true, // 是否显示空布局
						icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
						tip: '~ 暂无相关数据 ~', // 提示
						btnText: '去逛逛 >', // 按钮
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
						top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
						zIndex: 99 // fixed定位z-index值
					}
				},
				list: [],
				payTotal: 0, //累计加油消费
				disTotal: 0, //累计总优惠
				cycleTotal: 0 //累计中期加油消费
				
			}
		},
		onLoad() {
			// this.getList()
			
			// #ifdef MP-ALIPAY
			// 支付宝小程序关闭页面下拉(默认开启下拉)
			my.setCanPullDown({
				canPullDown: false
			});
			// #endif
		},
		methods:{
			checkSel(item){
				this.sel_index = item.id;
				this.status = item.id;
				this.list = []
				this.mescroll.resetUpScroll()
			},
			getList(){
				api.getOrderList().then(res=>{
					
				})
			},
			downCallback() {
				this.list = []
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
					let _this = this;
						//联网加载数据

					api.getOrderList({
						page: page.num,
						status: this.status,
					}).then(curPageData => {
						_this.mescroll.endBySize(curPageData.data.data, curPageData.data.total)
						//设置列表数据

						if (page.num == 1) _this.list = [];
						_this.list = _this.list.concat(curPageData.data.data);
						_this.payTotal=  curPageData.data.payTotal//累计加油消费
						_this.disTotal= curPageData.data.disTotal//累计总优惠
						_this.cycleTotal= curPageData.data.cycleTotal//累计中期加油消费
								
					}).catch(() => {
						this.mescroll.endErr();
					})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order{
		.order-pos{
			width: 100%;
			position: relative;
			height: 332rpx;
			z-index: 999;
			.order-fiexd{
				width: 100%;
				height: 400rpx;
				position: fixed;
				.order-head{
					width: 100%;
					height: 184rpx;
					background: #F12F63;
					.head-parent{
						width: 100%;
						height: 180rpx;
						background: #FFFFFF;
						box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04);
						opacity: 1;
						border-radius: 100rpx;
						position: relative;
						bottom: -60rpx;
						left: 50%;
						margin-left: -50%;
						box-shadow: 0px 20rpx 40rpx rgba(0, 0, 0, 0.04);
						z-index: 10;
						padding: 0 30rpx;
						box-sizing: border-box;
						.center-line{
							width: 1rpx;
							height: 72rpx;
							background: #E2E2E2;
						}
						.total-x-l,.total-x-r{
							// width: 50%;
							view{
								font-size: 40rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #222222;
							}
							text{
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #868588;
								padding-top: 15rpx;
							}
						}
						.order-head-child1{
							width: 680rpx;
							height: 180rpx;
							background: rgba(255,255,255,0.8);
							box-shadow: 0px 20rpx 40rpx rgba(0, 0, 0, 0.04);
							opacity: 0.3;
							border-radius: 100rpx;
							position: absolute;
							top: -20rpx;
							left: 50%;
							margin-left: -340rpx;
							z-index: 2;
							.order-head-child2{
								width: 600rpx;
								height: 180rpx;
								background: rgba(255,255,255,.25);
								border-radius: 100rpx;
								position: absolute;
								top: -20rpx;
								left: 50%;
								margin-left: -300rpx;
								z-index: 1;
							}
						}
					}
					
				}
				
			}
			.order-nav{
				width: 100%;
				height: 90rpx;
				padding-top: 56rpx;
				border-bottom: 1px solid #efefef;
				background: #fff;
				.order-nav-in{
					width: 80%;
					height: 100%;
					margin: 0 auto;
					
					view{
						display: flex;
						flex-direction: column;
						align-items: center;
						// justify-content: flex-end;
						text{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #888888;
							padding-bottom: 12rpx;
						}
						.active-ft{
							font-size: 34rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #222222;
						}
						.b-line{
							width: 56rpx;
							height: 8rpx;
							background: #F12F63;
							border-radius: 8rpx;
						}
					}
					
				}
			}
		}
		.order-list{
			padding-top: 40rpx;
			.order-item{
				width: 100%;
				padding-bottom: 30rpx;
				border-bottom: 1px solid #EEEEEE;
				margin-bottom: 30rpx;
				.order-item-top{
					.order-item-top-l{
						width: 70%;
						.name-total{
							width: 80%;
							overflow: hidden;
							text-overflow:ellipsis;
							white-space: nowrap;
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #1E1E20;
						}
						.pay-status-sc{
							height: 34rpx;
							// background: #FAAD1C;
							border-radius: 18rpx;
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							padding: 0 14rpx;
						}
					}
					.order-item-top-r{
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
					}
				}
				.order-time{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #B1B1B1;
				}
			}
		}
	}
</style>
